<template>
  <div class="goodslist-container">
    <!-- 头部标题固定 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="goBack"></a>
      <h1 class="mui-title">物料采购</h1>
    </header>

    <!-- 头部搜索固定 -->
    <mt-search cancel-text="取消" placeholder="请输入商品名称"></mt-search>

    <!-- 采购商品列表 -->
    <div class="goods">
      <div class="menu-wrapper">
        <!-- 左侧分类 -->
        <ul>
          <!-- current -->
          <li class="menu-item" v-for="(good,index) in goods" :key="index" :class="{current:index===currentIndex}" @click="clickMenuItem(index)">
            {{good.name}}
            <span class="mui-badge">8</span>
          </li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
          <li class="menu-item">123</li>
        </ul>

      </div>
      <div class="foods-wrapper">
        <!-- 每一类商品 -->
        <ul ref="foodsUl">
          <li class="food-list-hook" v-for="(good,index) in goods" :key="index" v-on:click="long">
            <div class="title">
              <img src="@/assets/images/门店采购菜单_03.png" />
              <span>{{good.name}}</span>
              <img src="@/assets/images/门店采购菜单_04.png" />
            </div>
            <!-- 每一类里的每一项商品 -->
            <div class="food-item border-bottom-1px" v-for="(food,index) in good.foods" :key="index">
              <!-- 商品图片 -->
              <div class="left">
                <img class="media-object" :src="food.icon" alt="food">
              </div>
              <!-- 商品价格 -->
              <div class="right">
                <h4 class="food-name">{{food.name}}</h4>
                <p class="format">规格: 5kg/包、一箱4包</p>
                <div class="bot">
                  <div class="bot-left">
                    <span class="price">￥{{food.price}}</span>
                    <span class="alone">/箱</span>
                  </div>

                  <CartControl :food="food" />
                </div>
              </div>

              <!-- 收藏 -->
              <img class="star" src="@/assets/images/收藏.png" alt="star" />
              <div class="coll" v-if="cflag">
                <img class="coll-img" src="@/assets/images/收藏1.png" style="display:none" />
                <img class="coll-img" src="@/assets/images/收藏2.png" style="display:block" />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部购物车固定 -->
    <div class="shopcar border-top-1px">
      <div class="car">
        <img src="@/assets/images/购物车.png" alt="">
        <span class="mui-badge mui-badge-primary ellipsis">1225</span>
      </div>
      <div class="price">
        <p class="ellipsis">￥<strong>5959551315.7</strong></p>
        <p>另需配送费 <span>￥500</span></p>
      </div>
      <router-link to="/pay" class="goplace">
        去下单
      </router-link>
    </div>

  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
import CartControl from '@/components/CartControl/CartControl'
export default {
  data() {
    return {
      scrollY: 0, // 右侧滑动的Y轴坐标（滑动过程实时变化）
      tops: [], // 所有右侧分类li的top组成的数组
      cflag:false
    }
  },
  created() {

  },
  mounted() {
    this.$store.dispatch('getShopGoods', () => {
      this.$nextTick(() => {
        this._initScroll()
        this._initTops()
      })
    })
  },
  methods: {
    _initScroll() {
      new BScroll('.menu-wrapper', {
        click: true
      })
      this.foodsScroll = new BScroll('.foods-wrapper', {
        probeType: 3,
        click: true
      })

      // 给右侧列表绑定scroll监听
      this.foodsScroll.on('scroll', ({ x, y }) => {
        this.scrollY = Math.abs(y)
      })

      // 给右侧列表绑定scroll结束的监听
      // this.foodsScroll.on('scrollEnd', ({ x, y }) => {
      //   console.log(x, y)
      //   this.scrollY = Math.abs(y)
      // })
    },
    _initTops() {
      const tops = []
      let top = 0
      tops.push(top)
      const lis = this.$refs.foodsUl.getElementsByClassName('food-list-hook')
      Array.prototype.slice.call(lis).forEach(li => {
        top += li.clientHeight
        tops.push(top)
      })

      this.tops = tops
    },
    goBack() {
      this.$router.go(-1)
    },
    clickMenuItem(index) {
      // console.log(index)
      const y = -this.tops[index]
      this.foodsScroll.scrollTo(0, y, 300)
    },
    long(){
      console.log(123)
      this.cflag = true
    }
  },
  computed: {
    ...mapState([
      'goods'
    ]),
    currentIndex() {
      const { scrollY, tops } = this

      const index = tops.findIndex((top, index) => {
        return scrollY >= top && scrollY < tops[index + 1]
      })
      return index
    }
  },
  components: {
    CartControl
  }
}
</script>

<style lang="scss">
@import "../../../styles/mixins.scss";
.goodslist-container {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
  padding-top: 92px;
  padding-bottom: 60px;
  font-family: "黑体", sans-serif;
  // font-family: Ubuntu;

  // font-family: "微软雅黑",sans-serif;
  .goods {
    width: 100%;
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    .menu-wrapper {
      width: 25%;
      background-color: #f7f7f7;
      .menu-item {
        width: 100%;
        text-align: center;
        font-size: 14px;
        position: relative;
        padding: 10px 6px;
        // padding: .625rem .375rem;
        color: #898989;
        &.current {
          border-left: 4px solid #36acda;
          color: #36acda;
          background-color: #fff;
        }
        span {
          position: absolute;
          top: 0;
          right: 0;
          background-color: #35aed8;
          color: #fff;
          font-weight: bold;
          font-size: 10px;
        }
        &.menu-item:first-child {
          span {
            background-color: #ffe900;
          }
        }
      }
    }
    .foods-wrapper {
      width: 75%;
      padding-left: 5px;
      .food-list-hook {
        .title {
          padding: 20px 0 10px 0;
          text-align: center;
          img {
            width: 80px;
            vertical-align: middle;
          }
          span {
            font-size: 14px;
            // font-weight: bold;
          }
        }
        .food-item {
          width: 100%;
          position: relative;
          display: flex;
          flex-direction: row;
          padding-top: 10px;
          &.border-bottom-1px {
            @include border-bottom-1px(rgba(7, 17, 27, 0.1));
          }
          .left {
            width: 80px;
            img {
              width: 100%;
              // display: block;
              vertical-align: middle;
            }
          }
          .right {
            width: 100%;
            margin-left: 10px;
            padding-right: 6px;
            .format {
              color: #aeaeae;
              font-size: 13px;
              margin-bottom: 0px;
            }
            .bot {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              font-family: "微软雅黑", sans-serif;
              .bot-left {
                color: #fd2a2b;
                .price {
                  // font-weight: bold;
                  font-size: 16px;
                }
                .alone {
                  font-size: 12px;
                }
              }
            }
          }
          .star {
            width: 25px;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
          }
          .coll {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            .coll-img {
              width: 50px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
  }
  .shopcar {
    width: 100%;
    height: 60px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    font-family: "微软雅黑", sans-serif;
    &.border-top-1px {
      @include border-top-1px(rgba(7, 17, 27, 0.1));
    }
    > div {
      height: 100%;
    }
    .car {
      width: 30%;
      text-align: center;
      line-height: 80px;
      img {
        width: 35px;
        // display: block;
      }
      span {
        position: absolute;
        top: 10px;
        left: 16%;
        background-color: #37abdb;
        font-weight: bold;
      }
    }
    .price {
      width: 40%;
      p {
        margin-bottom: 0;
      }
      p:first-child {
        font-size: 20px;
        font-weight: bold;
        color: #36acd8;
        margin-top: 10px;
        strong {
          font-size: 26px;
        }
      }
      p:last-child {
        font-size: 12px;
      }
    }
    .goplace {
      width: 30%;
      text-align: center;
      line-height: 60px;
      background-color: #36acd8;
      color: #fff;
      font-size: 16px;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
  }

  .mui-bar .mui-icon {
    color: #000;
  }
  .mui-title {
    font-size: 18px;
  }
  .mint-searchbar-inner .mintui-search {
    font-size: 18px;
  }
  .mint-searchbar-inner {
    border-radius: 6px;
    height: 30px;
  }
  input[type="search"] {
    margin-bottom: 0;
    height: 26px;
    background-color: #fff;
    font-size: 14px;
  }
  input::-webkit-input-placeholder {
    font-size: 14px;
    color: #e4e4e4;
    text-align: left;
  }
  input:-moz-placeholder {
    font-size: 14px;
    color: #e4e4e4;
  }
  input:-ms-input-placeholder {
    font-size: 14px;
    color: #e4e4e4;
  }
  .mui-bar {
    background-color: #fff;
  }
  .mui-bar-nav {
    box-shadow: none;
  }
  .mint-search {
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    height: 44px;
    overflow: visible;
  }
  .mint-searchbar {
    padding: 9px 15px;
    background-color: #f7f7f7;
  }
}
</style>
